<template>
  <div>
    <div>
      <!-- 在标签属性上, 不给值, 默认就是true(布尔值)
      等价于:default-expand-all="true"
      :default-checked-keys这个属性
      只能用于初始值, 数组后续改变影响不到标签
      所以搜文档找到一个tree的方法使用修改
      -->
      <el-tree ref="perTree" :data="permissionList" :props="{ label:'name' }" show-checkbox default-expand-all check-strictly node-key="id" />
    </div>

    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="cancelButton">取 消</el-button>
        <el-button size="small" type="primary" @click="setRolesBtn">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AssignPermission',
  props: {
    // 全部-权限点列表数据(树形结构数据)
    permissionList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 取消按钮
    cancelButton() {
      this.$emit('update:permissionShowDialog', false)
    },

    // 确定->设置权限按钮
    setRolesBtn() {
      // 拿到tree组件里, 选中复选框对应权限点id数组
      const idsArr = this.$refs.perTree.getCheckedKeys()
      // 回传到父组件里, 在父组件调用网络请求传给后台保存
      this.$emit('setPerIdsEV', idsArr)

      this.$emit('update:permissionShowDialog', false)
    }
  }
}
</script>

   <style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>
